iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
自我挑戰組

網站主題切換功能系列 第 6

Day6:切換主題背景色(1)

  • 分享至 

  • xImage
  •  

前言

今天的任務是實現切換亮色主題的背景顏色功能。

選擇合適的背景色

在開始撰寫程式之前,我想先向大家推薦一個線上色彩調色板收集網站,它的名字叫做 Color Hunt。這個網站裡面有許多由設計師創建的色彩調色板,使用者可以輕鬆搜尋各種不同類型的色彩組合。
https://ithelp.ithome.com.tw/upload/images/20230916/20162569lLuISCSMSP.png

由於今天我想要選擇相對亮色的背景色,但又不希望這些顏色太相似,因此我在 Color Hunt 網站上挑選了以下的色彩組合:
https://ithelp.ithome.com.tw/upload/images/20230916/20162569iCJEoyozIW.png

切換亮色主題的背景顏色

HTML架構

首先,我在 <aside> 元素中建立一個簡單的選單,使用巢狀的 <ul> 元素。由於我希望保留原始的背景顏色設定,所以我添加了一個預設值選項。

<aside>
  <button id="closeSidebarButton"><</button>
  <ul class="setting-list">
    <!-- 背景色 -->
    <li>
      <button id="toggleThemeButton">背景色切換</button>
      <ul class="sub-setting-list">
        <li><button id="defaultThemeButton">預設</button></li>
        <li><button id="lightThemeButton">亮色</button></li>
      </ul>
    </li>
  </ul>
</aside>

CSS 樣式

在設定背景顏色之前,我首先為 <aside> 元素設定樣式。

由於我希望一開始只有 <ul class="setting-list"> 的內容會顯示在 <aside> 中,值到使用者按下"背景色主題"按鈕時,才會顯示可切換的背景主題顏色。
所以我增加了一個名為 "show" 的類別,用來顯示選單內容。

aside .setting-list li .sub-setting-list {
  display: none;
  width: 100%;
  margin: 0.5rem 0;
  list-style-type: none;
}

aside .setting-list li .sub-setting-list.show {
  display: block;
}

接下來,為了更改主題背景色,我需要提取所有與顏色相關的程式碼。由於一開始的背景色是設定在 <body> 元素上,因此我需要為 <body> 元素設定一個類別 <body class="default-theme"> ,以便用來切換主題顏色。以下為程式碼片段。

預設背景色:

.default-theme {
  background-color: #f4f4f4;
}
.default-theme button {
  background-color: #333;
  color: #fff;
}
.default-theme header {
  background-color: #333;
  color: white;
}

亮色背景色:

.light-theme {
  background-color: #f2ead3;
}
.light-theme button {
  background-color: #3f2305;
  color: #f5f5f5;
}
.light-theme header {
  background-color: #3f2305;
  color: #f5f5f5;
}

JavaScript 邏輯

在 JavaScript 部分,我按照慣例先在 JavaScript 中初始化一些重要的 HTML 元素,以方便我之後的操作。然後在 setupEventListeners() 方法中添加三個事件監聽器以及用來設定主題的方法。

首先,先看 setTheme() 方法,這個方法使用 className 來獲取元素的類別名稱,將此方法提取出來可以避免重複撰寫相同的程式碼。

setTheme(themeName) {
    document.body.className = themeName;
}

以下是事件監聽器的程式碼:

this.toggleThemeButton.addEventListener("click", () => {
  this.subSettingList.classList.toggle("show");
});

this.defaultThemeButton.addEventListener("click", () => {
  this.setTheme("default-theme");
});

this.lightThemeButton.addEventListener("click", () => {
  this.setTheme("light-theme");
});
}

在這裡,我要特別提到 classList.toggle() 方法,它是一個很實用的方法,用於檢查指定的類別名稱是否存在於元素中。如果存在,則刪除該類別,如果不存在,則添加該類別。下面我有附上 W3School 的網址,有興趣可以去試試看。

GitHub

github code-ThemeTasker
ThemeTasker

參考網站

設計師都愛用!49 個免費配色工具推薦:配色參考、技巧及靈感
Color Hunt
mdn:className
w3school-Toggle Class


上一篇
Day5:處理待辦事項的JS邏輯(2)
下一篇
Day7:淺談 SCSS
系列文
網站主題切換功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言